
import React from "react";
import sty from './sty.module.css';
import cs from 'classnames'
import { memo } from "react";
import { Popover } from "antd";
import { useCallback } from "react";
import { useState } from "react";


import SongsCategory from '../songsCategory'
import { useSelector, shallowEqual } from "react-redux";



const SongsHeader = () => {
  const [isShowPop, setIsShowPop] = useState(false)

  const { currentCategory } = useSelector(state => ({
    currentCategory: state.getIn(['songs', 'currentCategory'])
  }), shallowEqual)

  const changeShow = useCallback(isShow => {
    setIsShowPop(isShow)
  }, [])

  return <div className={cs(sty.root, 'flex2')}>
    <div id='songsHeader' className={cs(sty.left, 'flex2')}>
      <span className={sty.title}>{currentCategory}</span>
      <Popover
        placement='bottom'
        trigger='click'
        content={<SongsCategory changeShow={changeShow} />}
        visible={isShowPop}
        onVisibleChange={changeShow}
      >
        <button className={cs(sty.select, 'flex3')}>选择分类<i className={cs(sty.icon, 'sprite_icon2')}></i></button>
      </Popover>
    </div>

    <span className={sty.hot}>热门</span>
  </div>
}
export default memo(SongsHeader)